import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
]);

const container = document.getElementById("container");

// 创建虚拟节点
const myVnode1 = h('a', {
  props: {
    href: 'https://baidu.com',
    target: '_blank'
  }
}, '百度');
console.log(myVnode1);

const myVnode2 = h('div', {
  class: {
    'box': true
  }
}, '我是一个div')

const myVnode3 = h('ul', {},
  [
    h('li', {}, '橘子'),
    h('li', '苹果'),
    h('li', '香蕉'),
    h('li', [
      h('p', '番茄'),
      h('p', '西红柿'),
    ]),
  ])
console.log(myVnode3)

// patch(container, myVnode1)
// patch(container, myVnode2)
patch(container, myVnode3)


// const someFn = () => {
//   console.log('someFn')
// }
// const anotherEventHandler = () => {
//   console.log('anotherEventHandler')
// }
// const vnode = h("div#container.two.classes", { on: { click: someFn } }, [
//   h("span", { style: { fontWeight: "bold" } }, "This is bold"),
//   " and this is just normal text",
//   h("a", { props: { href: "/foo" } }, "I'll take you places!"),
// ]);
// // Patch into empty DOM element – this modifies the DOM as a side effect
// patch(container, vnode);

// const newVnode = h(
//   "div#container.two.classes",
//   { on: { click: anotherEventHandler } },
//   [
//     h(
//       "span",
//       { style: { fontWeight: "normal", fontStyle: "italic" } },
//       "This is now italic type"
//     ),
//     " and this is still just normal text",
//     h("a", { props: { href: "/bar" } }, "I'll take you places!"),
//   ]
// );
// // Second `patch` invocation
// setTimeout(() => {

//   patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state
// }, 3000);